<template>
    <el-card>
        <el-form :model="form" :rules="rules" ref="formRef" label-width="150px">
            <el-form-item label="用户名" prop="username">
                <el-input v-model="form.username" disabled></el-input>
            </el-form-item>
            <el-form-item label="原密码" prop="oldPassWord">
                <el-input v-model="form.oldPassWord" type="password"></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="newPassWord">
                <el-input v-model="form.newPassWord" type="password"></el-input>
            </el-form-item>
            <el-form-item label="确认新密码" prop="newPassWord2">
                <el-input v-model="form.newPassWord2" type="password"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="confirmUpdate">确认修改</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>
<script>
export default {
    name: 'modifyPassword',
    data() {
        return {
            form: {
                username: '',
                password: '',
                oldPassWord: '',
                newPassWord: '',
                newPassWord2: ''
            },
            rules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' }
                ],
                oldPassWord: [
                    { required: true, message: '请输入原密码', trigger: 'blur' }
                ],
                newPassWord: [
                    { required: true, message: '请输入新密码', trigger: 'blur' }
                ],
                newPassWord2: [
                    { required: true, message: '请输入确认新密码', trigger: 'blur' }
                ],
            }
        }
    },
    // 组件挂载完毕发送请求
    mounted() {
        // 获取列表数据方法
        this.initUserInfo();
    },
    methods: {
        confirmUpdate() {
            this.$refs.formRef.validate(async (valid) => {
                if (valid) {
                    if (this.form.oldPassWord !== this.form.password) {
                        this.$message({
                            type: 'error',
                            message: '原密码错误'
                        })
                    } else if (this.form.newPassWord !== this.form.newPassWord2) {
                        this.$message({
                            type: 'error',
                            message: '确认密码错误'
                        })
                    } else {
                        try {
                            let result = await this.$API.trademark.reqAddOrUpdateTradeMark(this.form)
                            let data = result.data;
                            if (data.code == 0) {
                                // 表示提交成功
                                this.$message({
                                    type: 'success',
                                    message: '密码修改成功，请重新登录后生效'
                                })
                                this.$refs.formRef.resetFields();
                            } else {
                                this.$message({
                                    type: 'success',
                                    message: `${data.msg}`
                                })
                            }
                        } catch (error) {
                            this.$message({
                                type: 'success',
                                message: '系统运行出错，请联系管理员'
                            })
                        }
                    }
                    // if (result.code == 200) {
                    // 弹出信息
                    // this.$message({
                    //     type: 'success',
                    //     message: '修改密码成功'
                    // })
                }
                else {
                    this.$message({
                        type: 'error',
                        message: '修改密码失败'
                    })
                }
            })
        },
        initUserInfo() {
            let userInfoJSON = sessionStorage.getItem("userInfo")
            this.form = JSON.parse(userInfoJSON);
        }
    }
}

</script>

<style lang="scss" scoped>
.el-input {
    width: 300px;
}
</style>